
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style/style.css" />
    <link rel="stylesheet" href="style/header.css" />
    <script type="text/javascript">
    </script>
    <script type="text/javascript" src="script/jquery-1.12.4.js"></script>
    <!--头部-->
    <script type="text/javascript" src="script/header.js"></script>
    <!--箭头向上的函数-->
    <script type="text/javascript" src="script/jquery.lavalamp.min.js"></script>
    <!-- 关于图片进来的js文件-->
    <script type="text/javascript" src="script/script.js"></script>
</head>
<body>
<div id="web">
    <!--头部-->
    <div class="header">
        <div class="headerBox"></div>
        <div class="logo"></div>
        <i class="line" id="line"></i>
        <div class="menu" id="menu">
            <ul class="list-inline">
                <li><a href="..\首页\index.html">首页</a></li>
                <li><a href="..\业务\yewu.html" target="_blank">业务</a></li>
                <li><a href="..\案例\case.html" target="_blank">案例</a></li>
                <li><a href="#">客户</a></li>
                <li><a href="#">品质</a></li>
                <li><a href="#">增值</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="..\联系\contactUs.html" target="_blank">联系</a></li>
            </ul>
        </div>
        <div class="hotline">
            <a href="tel:4006123011" title="网站建设免费咨询热线"><s></s><span>4006-123-011</span></a>
        </div>
    </div>
    <!--内容-->
    <div class="buildCon">
        <div class="buildBox brand" id="wsbrand">
            <div class="rb"><img src="images/build1.png" alt="品牌展示网站" /></div>
            <div class="wordBox">
                <div class="wordTit fixed"><b>品牌</b><h5>展示网站</h5><h6>Brand</h6></div>
                <p>以提升客户品牌价值和市场占有率为目标。<br />案例：欧派、松下、例外服饰、格雅表、海天味业等。</p>
                <a href="javascrript:;" class="more">查看更多案例></a>
            </div>
            <div class="img">
                <img src="images/img1.png" alt="品牌展示网站" class="tv" />
                <img src="images/img2.png" alt="品牌展示网站" class="woman" />
            </div>
        </div>
        <div class="buildBox portal" id="wsportal">
            <div class="goNext"></div>
            <div class="lt"><img src="images/build2.png" alt="官方门户网站" /></div>
            <div class="rb"><img src="images/build3.png" alt="官方门户网站" /></div>
            <div class="wordBox">
                <div class="wordTit fixed"><b>官方</b><h5>门户网站</h5><h6>Portal</h6></div>
                <p>多运用于集团性企事业单位。<br />案例：广州发展集团、广州建筑集团、广百集团等。</p>
                <a href="javascript:;" class="more">查看更多案例></a>
            </div>
            <div class="img">
                <img src="images/img3.png" alt="官方门户网站" class="fish" />
            </div>
        </div>
        <div class="buildBox market" id="wsmarket">
            <div class="goNext"></div>
            <div class="lt"><img src="images/build4.png" alt="企业营销网站" /></div>
            <div class="lb"><img src="images/build5.png" alt="企业营销网站" /></div>
            <div class="wordBox">
                <div class="wordTit fixed"><b>企业</b><h5>营销网站</h5><h6>Marketing</h6></div>
                <p>以营销为出发点，以提高客户转化率为主要目标。<br />案例：旭东中国、白云山和黄、车天车地、芬尼克兹、奥尼等。</p>
                <a href="javascript:;" class="more">查看更多案例></a>
            </div>
            <div class="img">
                <img src="images/img4.png" alt="企业营销网站" class="car" />
            </div>
        </div>
        <div class="buildBox ec" id="wsec">
            <div class="goNext"></div>
            <div class="rt"><img src="images/build6.png" alt="电子商务网站" /></div>
            <div class="lb"><img src="images/build7.png" alt="电子商务网站" /></div>
            <div class="wordBox">
                <div class="wordTit fixed"><b>电子</b><h5>商务网站</h5><h6>E-commerce</h6></div>
                <p>实现消费者与商家的网上购物、网上交易。<br />案例：轻工业交易网、广百荟、白马服装城、歌莉娅商城、每一角落等。</p>
                <a href="javascript:;" class="more">查看更多案例></a>
            </div>
            <div class="img">
                <img src="images/img5.png" alt="电子商务网站" class="ecRoom" />
                <img src="images/img6.png" alt="电子商务网站" class="balloon" />
            </div>
        </div>
        <div class="buildBox infopor" id="wsinfopor">
            <div class="goNext"></div>
            <div class="rt"><img src="images/build8.png" alt="信息门户网站" /></div>
            <div class="rb"><img src="images/build9.jpg" alt="信息门户网站" /></div>
            <div class="wordBox">
                <div class="wordTit fixed"><b>信息</b><h5>门户网站</h5><h6>Information portal</h6></div>
                <p>对外发布信息，以实现信息有效控制。<br />案例：南方能源观察、广州商业总会、物流杂志、赛立信竞争情报网等。</p>
                <a href="javascript:;" class="more">查看更多案例></a>
            </div>
            <div class="img">
                <img src="images/img7.png" alt="信息门户网站" />
            </div>
        </div>
        <div class="buildBox group" id="wsgroup">
            <div class="goNext"></div>
            <div class="lt"><img src="images/build10.jpg" alt="集团站群" /></div>
            <div class="wordBox">
                <div class="wordTit fixed"><b>集团</b><h5>站群</h5><h6>Group station group</h6></div>
                <p>采用“主站+分站”的模式，主站可数据统一管理，每个分站均属独立的系统，可设立独立的数据库、顶级域名、不同的服务器。系统拥有高安全、模块化核心优势 <br>案例：广州建筑、水塔、大自然家居集团</p>
                <a href="javascript:;" class="more">查看更多案例></a>
            </div>
            <div class="img">
                <img src="images/img18.png" alt="集团站群" />
            </div>
        </div>
    </div>

</div>

<!--侧面导航-->
<ul class="indexFloatCon">
    <li><a href="javascript:;" class="indexGoTop" title="返回顶部"></a></li>
    <li><a href="#bf1" class="bf1" id="bf1">品牌展示</a></li>
    <li><a href="#bf2" class="bf2" id="bf2">官方门户</a></li>
    <li><a href="#bf3" class="bf3" id="bf3">企业营销</a></li>
    <li><a href="#bf4" class="bf4" id="bf4">电子商务</a></li>
    <li><a href="#bf5" class="bf5" id="bf5">信息门户</a></li>
    <li class="mb4"><a href="#bf6" class="bf6" id="bf6">集团站群</a></li>
    <li><a target="_blank" href="javascript:;" title="点击咨询" class="online">在线服务</a></li>
    <li class="wenti">
        <a href="javascript:;"></a>
        <dl class="wentiCon fixed">
            <dt><a href="/cn/faq">更多></a><span>常见问题</span></dt>
            <dd><a href="javascript:;" target="_blank">· APP的开发需购买哪一种苹果账号</a></dd>
            <dd><a href="javascript:;" target="_blank">· 如何制定网站营销活动监测方案？</a></dd>
            <dd><a href="javascript:;" target="_blank">· 怎么适合自身网站的推广手法?</a></dd>
            <dd><a href="javascript:;" target="_blank">· 网站设计高手如何促进电商销售</a></dd>
            <dd><a href="javascript:;" target="_blank">· 如何规避网站运营中常见的错误?</a></dd>
            <dd><a href="javascript:;" target="_blank">· 如何在网页设计中产生有效的注意力?</a></dd>
            <dd><a href="javascript:;" target="_blank">· 如何建设一个成功的网站</a></dd>

        </dl>
    </li>
    <li class="ewmLi">
        <a href="javascript:;" class="erweima"></a>
        <div class="ewmCon fixed">
            <div class="ewm"><img src="images/erweima.jpg"><p>关注优网</p></div>
            <div class="ewm"><img src="images/weim.jpg"><p>手机站</p></div>
        </div>
    </li>
</ul>


<script>
    //	    侧面导航
    var bf1h = $('.brand').position().top,
            bf2h = $('.portal').position().top,
            bf3h = $('.market').position().top,
            bf4h = $('.ec').position().top,
            bf5h = $('.infopor').position().top,
            bf6h = $('.group').position().top,
            ifph = $('.group').height(),
            ssct = $(window).scrollTop(),
            wh = $(window).height(),
            dh = $(document).height();

//    console.log(wh);//661 页面的高度

    $(window).scroll(function(event) {
        var sh = $(this).scrollTop();
//        console.log(sh);//鼠标到卷上取得高度
        if (sh<bf2h) {
            $('.indexFloatCon .bf1').addClass('on').parents('li').siblings('li').find('a').removeClass('on');
        };

        if(sh+wh>=bf3h-200){
            $('.portal').addClass('anim').find('.goNext').addClass('up');
            $('.indexFloatCon .bf2').addClass('on').parents('li').siblings('li').find('a').removeClass('on');
        }else {
            $('.portal').find('.goNext').removeClass('up');
        }

        if(sh+wh>=bf4h-200){
            $('.market').addClass('anim').find('.goNext').addClass('up');
            $('.indexFloatCon .bf3').addClass('on').parents('li').siblings('li').find('a').removeClass('on');
        }else{
            $('.market').find('.goNext').removeClass('up');
        }

        if(sh+wh>bf5h-200){
            $('.ec').addClass('anim').find('.goNext').addClass('up');
            $('.indexFloatCon .bf4').addClass('on').parents('li').siblings('li').find('a').removeClass('on');
        }else{
            $('.ec').find('.goNext').removeClass('up');
        }

        if(sh+wh>bf6h-300){
            $('.infopor').addClass('anim').find('.goNext').addClass('up');
            $('.indexFloatCon .bf5').addClass('on').parents('li').siblings('li').find('a').removeClass('on');
        }else{
            $('.infopor').find('.goNext').removeClass('up');
        }

        if(sh+wh>=dh || sh+wh>=bf6h+ifph){
            $('.group').addClass('anim').find('.goNext').addClass('up');
            $('.indexFloatCon .bf6').addClass('on').parents('li').siblings('li').find('a').removeClass('on');
        }else{
            $('.group').find('.goNext').removeClass('up');
        }
    });

    $('#bf1').click(function(event) {$('html,body').stop(true,true).animate({scrollTop:bf1h});});
    $('#bf2').click(function(event) {$('html,body').stop(true,true).animate({scrollTop:bf2h});});
    $('#bf3').click(function(event) {$('html,body').stop(true,true).animate({scrollTop:bf3h});});
    $('#bf4').click(function(event) {$('html,body').stop(true,true).animate({scrollTop:bf4h});});
    $('#bf5').click(function(event) {$('html,body').stop(true,true).animate({scrollTop:bf5h});});
    $('#bf6').click(function(event) {$('html,body').stop(true,true).animate({scrollTop:bf6h});});
</script>
<script>
    $(function () {
        $(".list-inline").children().eq(1).click();
    });
</script>
</body>
</html>